<template>
<q-drawer v-model="isMemberDrawer" overlay side="right" style="z-index: 1" :width="320" :breakpoint="200" class="no-scroll" content-class="bg-grey-10 ">
    <q-scroll-area style="
      height: calc(100% - 230px);
      margin-top: 130px;
      margin-bottom: 100px;
    ">
        <q-card v-if="onlineList.length>0" flat square class="transparent q-py-sm q-px-md">
            <div class="text-white text-caption">正在查看 <span>·{{onlineList.length}}</span></div>
            <q-list class=" text-grey-5">

                <q-item v-for="(item,index) in onlineList" :key="index" class="row items-center q-py-xs">
                    <q-avatar size="25px" class="q-mr-sm">
                        <img :src="item.avatar">
                    </q-avatar>
                    <q-item-section>
                        <div class="text-caption row no-wrap items-center ">
                            {{item.username.length>=10?item.username.substring(0,9)+'……':item.username}}<span :class="item.isQw?'text-orange':'text-green-6'" class="text-caption q-ml-sm">@{{item.isQw?'一方映画':'微信'}}</span>
                        </div>
                    </q-item-section>
                    <!-- <q-item-section side right class="row">
                        <div class="row text-grey-6 items-center non-selectable">
                            <span v-if="item.permission==5">创建者</span>
                            <span v-if="item.permission==4">管理员</span>
                            <span v-if="item.permission==3">可编辑</span>
                            <span v-if="item.permission==1">可查看</span>
                            <q-icon v-if="user.right>=4 && item.permission!=5" name="mdi-chevron-down">

                            </q-icon>
                            <q-menu auto-close v-if="user.right>=4 && item.permission!=5" content-class="bg-grey-9 text-white" anchor="bottom right" self="top right" :offset="[0,10]">

                                <q-item clickable v-if="item.isQw">
                                    <q-item-section side left>
                                        <q-icon :class="item.permission==4?'text-green-6 text-bold':'text-transparent'" class="q-mr-sm " name="mdi-check-outline"></q-icon>
                                    </q-item-section>

                                    <q-item-section @click="handleChangePermission(item,4)">
                                        <q-item-label>管理员</q-item-label>
                                        <q-item-label class="text-grey-5" caption>可修改项目和设置权限</q-item-label>
                                    </q-item-section>
                                </q-item>
                                <q-separator inset color="grey-6"></q-separator>
                                <q-item clickable>
                                    <q-item-section side left>
                                        <q-icon :class="item.permission==3?'text-green-6 text-bold':'text-transparent'" class="q-mr-sm " name="mdi-check-outline"></q-icon>
                                    </q-item-section>

                                    <q-item-section @click="handleChangePermission(item,3)">
                                        <q-item-label>可编辑</q-item-label>
                                        <q-item-label class="text-grey-5" caption>可编辑相关文件、分享项目</q-item-label>
                                    </q-item-section>

                                </q-item>
                                <q-separator inset color="grey-6"></q-separator>

                                <q-item clickable>
                                    <q-item-section side left>
                                        <q-icon :class="item.permission==1?'text-green-6 text-bold':'text-transparent'" class="q-mr-sm " name="mdi-check-outline"></q-icon>

                                    </q-item-section>

                                    <q-item-section @click="handleChangePermission(item,1)">
                                        <q-item-label>可查看</q-item-label>
                                        <q-item-label class="text-grey-5" caption>仅查看相关文件</q-item-label>
                                    </q-item-section>
                                </q-item>
                                <q-separator inset color="grey-6"></q-separator>

                                <q-item clickable>
                                    <q-item-section side left>
                                        <q-icon class="q-mr-sm text-red-4 text-bold" name="mdi-account-remove-outline"></q-icon>
                                    </q-item-section>

                                    <q-item-section @click="handleRemoveMember(item)">
                                        <q-item-label>移除成员</q-item-label>

                                    </q-item-section>
                                </q-item>
                            </q-menu>
                        </div>

                    </q-item-section> -->
                </q-item>
            </q-list>

        </q-card>
        <q-card v-if="memberList.length>0" flat square class="transparent q-py-sm q-px-md">
            <div class="text-white text-caption">项目成员 <span>·{{memberList.length}}</span></div>
            <q-list class=" text-grey-5">

                <q-item v-for="(item,index) in memberList" :key="index" class="row items-center q-py-xs">
                    <q-avatar size="25px" class="q-mr-sm">
                        <img :src="item.avatar">
                    </q-avatar>
                    <q-item-section>
                        <div class="text-caption row no-wrap items-center ">
                            {{item.username.length>=10?item.username.substring(0,9)+'……':item.username}}<span :class="item.isQw?'text-orange':'text-green-6'" class="text-caption q-ml-sm">@{{item.isQw?'一方映画':'微信'}}</span>
                        </div>
                    </q-item-section>
                    <q-item-section side right class="row">
                        <div class="row text-grey-6 items-center non-selectable">
                            <span v-if="item.permission==5">创建者</span>
                            <span v-if="item.permission==4">管理员</span>
                            <span v-if="item.permission==3">可编辑</span>
                            <span v-if="item.permission==1">可查看</span>
                            <q-icon v-if="user.right>=4 && item.permission!=5" name="mdi-chevron-down">

                            </q-icon>
                            <q-menu auto-close v-if="user.right>=4 && item.permission!=5" content-class="bg-grey-9 text-white" anchor="bottom right" self="top right" :offset="[0,10]">

                                <q-item clickable v-if="item.isQw">
                                    <q-item-section side left>
                                        <q-icon :class="item.permission==4?'text-green-6 text-bold':'text-transparent'" class="q-mr-sm " name="mdi-check-outline"></q-icon>
                                    </q-item-section>

                                    <q-item-section @click="handleChangePermission(item,4)">
                                        <q-item-label>管理员</q-item-label>
                                        <q-item-label class="text-grey-5" caption>可修改项目和设置权限</q-item-label>
                                    </q-item-section>
                                </q-item>
                                <q-separator inset color="grey-6"></q-separator>
                                <q-item clickable>
                                    <q-item-section side left>
                                        <q-icon :class="item.permission==3?'text-green-6 text-bold':'text-transparent'" class="q-mr-sm " name="mdi-check-outline"></q-icon>
                                    </q-item-section>

                                    <q-item-section @click="handleChangePermission(item,3)">
                                        <q-item-label>可编辑</q-item-label>
                                        <q-item-label class="text-grey-5" caption>可编辑相关文件、分享项目</q-item-label>
                                    </q-item-section>

                                </q-item>
                                <q-separator inset color="grey-6"></q-separator>

                                <q-item clickable>
                                    <q-item-section side left>
                                        <q-icon :class="item.permission==1?'text-green-6 text-bold':'text-transparent'" class="q-mr-sm " name="mdi-check-outline"></q-icon>

                                    </q-item-section>

                                    <q-item-section @click="handleChangePermission(item,1)">
                                        <q-item-label>可查看</q-item-label>
                                        <q-item-label class="text-grey-5" caption>仅查看相关文件</q-item-label>
                                    </q-item-section>
                                </q-item>
                                <q-separator inset color="grey-6"></q-separator>

                                <q-item clickable>
                                    <q-item-section side left>
                                        <q-icon class="q-mr-sm text-red-4 text-bold" name="mdi-account-remove-outline"></q-icon>
                                    </q-item-section>

                                    <q-item-section @click="handleRemoveMember(item)">
                                        <q-item-label>移除成员</q-item-label>

                                    </q-item-section>
                                </q-item>
                            </q-menu>
                        </div>

                    </q-item-section>
                </q-item>
            </q-list>

        </q-card>

    </q-scroll-area>
    <q-card class="transparent q-pa-none absolute-top" flat square>
        <q-toolbar class="bg-grey-9 text-white">
            <span class="text-h6"> 项目成员·{{ memberList.length }} </span>
            <q-space></q-space>

            <q-btn flat round dense @click="handleMemberDrawer">
                <q-icon name="close" />
            </q-btn>
        </q-toolbar>
        <q-separator></q-separator>

        <q-input dense dark color="primary" class="text-grey-9 q-pa-md" label-color="text-grey-9" input-class="text-grey-9" label="添加成员">
            <template v-slot:prepend>
                <q-icon color="grey-6" name="mdi-account-multiple-plus" />
            </template>
        </q-input>
    </q-card>

    <q-card class="transparent q-px-md q-py-sm absolute-bottom" style="height: 100px" flat square>
        <q-separator color="grey-5"></q-separator>
        <div class="text-white text-subtitle1 q-py-sm">
            企业内外成员默认加入可查看
            <span v-if="user.right >= 3" class="text-caption text-teal-4">设置权限</span>
        </div>
        <div class="row text-grey-4">
            <q-btn color="grey-4" class="col-grow" outline icon="link">获取链接</q-btn>
            <q-btn class="q-ml-sm" outline icon="mdi-qrcode"></q-btn>
        </div>
    </q-card>
</q-drawer>
</template>

<script>
import {
    getProjectinfo
} from "assets/api/studio";
import {
    removeMember,
    updateMemberPermission
} from "assets/api/member";
export default {
    name: 'MemberDrawer',
    props: {
        memberList: {
            type: Array,
            default: [
                [],
                [],
                []
            ]
        },
        isMemberDrawer: {
            default: false
        },
        pid: {
            type: String
        },
        user: {
            type: Object
        },
        onlineList: {
            type: Array
        }
    },
    data() {
        return {

            isEdit: false,
        }
    },
    mounted() {

    },
    methods: {
        loadprojectinfo() {
            let reqdata = {
                pid: this.pid,
            };
            getProjectinfo(reqdata).then((res) => {

                let memberlist = res.data.data[1].concat(res.data.data[2]);
                this.memberList = this.handleSortMember(memberlist);
            });
        },
        handleSortMember(memberlist) {
            /** 两个参数： 参数1 是排序用的字段， 参数2 是：是否升序排序 true 为升序，false为降序*/
            function compare(attr, rev) {
                // console.log(attr, rev)
                if (rev == undefined) {
                    rev = 1;
                } else {
                    rev = rev ? 1 : -1;
                }
                return (a, b) => {
                    a = a[attr];
                    b = b[attr];
                    if (a < b) {
                        return rev * -1;
                    }
                    if (a > b) {
                        return rev * 1;
                    }
                    return 0;
                };
            }
            let newMemberList = memberlist.sort(compare("permission", false));

            let qw = [];
            let wechat = [];
            newMemberList.forEach((item) => {
                if (item.openid != undefined && item.openid.length > 0) {
                    //微信用户
                    item.username = item.nickname;
                    wechat.push(item);
                }
                if (item.eid != undefined && item.eid > 0) {
                    //企微用户
                    qw.push(item);
                }
            });
            let sortedMemberList = [];
            sortedMemberList.push(newMemberList);
            sortedMemberList.push(qw);
            sortedMemberList.push(wechat);

            return sortedMemberList;
        },
        triggerReload(val="project") {
            this.$emit("update",val)
        },
        handleMemberDrawer() {
            this.$emit('close')
        },
        handleChangePermission(user, v) {
            console.log(user, v);
            if (user.eid > 0) {
                var uid = user.eid;
            } else {
                var uid = user.openid;
            }
            updateMemberPermission({
                pid: this.pid,
                uid,
                permission: v
            }).then(res => {
                this.handleRes(res)
            })
        },
        handleRes(res) {
            let {
                v
            } = res.data;
            if (v.code == 1) {
                this.triggerReload();
                this.$q.notify({
                    color: "light-green-4",
                    icon: "far fa-check-circle",
                    position: "top",
                    textColor: "white",
                    message: "处理成功！",
                    timeout: "1500",
                });
            } else {
                this.$q.notify({
                    color: "red-5",
                    textColor: "white",
                    icon: "warning",
                    position: "top",
                    timeout: "1500",
                    message: "处理失败！",
                });
            }

        },
        handleRemoveMember(user) {
            console.log(user, '移除成员');

            this.$q
                .dialog({
                    title: "提示",
                    message: "确认移除该成员吗？",
                    cancel: true,
                    persistent: true,
                })
                .onOk(() => {
                    if (user.eid > 0) {
                        var uid = user.eid;
                    } else {
                        var uid = user.openid;
                    }

                    removeMember({
                        pid: user.pid,
                        uid,
                    }).then(res => {
                        this.handleRes(res)
                    })

                })
                .onCancel(() => {})
                .onDismiss(() => {
                    // console.log('I am triggered on both OK and Cancel')
                });
        }
    }
}
</script>
